<template>
  <div class="achievement" v-cloak v-show="show">
    <div class="bg_color"></div>
    <div >
      <div class="topIndex">
        <ul class="loca">
          <li class="loca_li1">
            筛选位置:
          </li>
          <li class="loca_li2" @click="select(0)">
            <span v-if="province == ''">选择</span>
            <span v-else>{{province}}</span>
            <img src="../assets/image/a_03.png" alt="">
          </li>
          <li class="loca_li2" @click="select(1)">
            <span v-if="city == ''">选择</span>
            <span v-else>{{city}}</span>
            <img src="../assets/image/a_03.png" alt="">
          </li>
          <li class="loca_li2" @click="select(2)">
            <span v-if="county == ''">选择</span>
            <span v-else>{{county}}</span>
            <img src="../assets/image/a_03.png" alt="">
          </li>
        </ul>
        <p class="all">全部信息</p>
      </div>
      <div id="city" style="position: fixed;bottom: 0;top:80px;left:0;right: 0;overflow: auto;width:100%">
        <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
          <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
          </div>
          <div class="name_bh" v-show="isshow"></div>
          <div class="nosta" v-if="!nocard">
            <img src="../assets/image/a_09.png" alt="" style="width: 80px;margin-bottom: 20px;">
            <p>未查询到您筛选的地址！</p>
          </div>
          <div class="near_by" v-for="(item,index) in list" v-else>
            <img :src="item.de_headimg" alt="">
            <div class="near_b1">
              <h3>{{item.de_name}}</h3>
              <p class="near_p">地址:{{item.de_province}}{{item.de_city}}{{item.de_county}}{{item.de_address}}</p>
              <p>电话：{{item.de_mobile}}</p>
            </div>
          </div>
          <div slot="bottom" class="mint-loadmore-bottom">
            <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <div class="nearby_nm" v-if="namesta" @click="namesta = false">
       <div class="nearby_n1">
           <p>
             <span style="float: left;color:#9e9e9e;" @click.stop="namesta = false">取消</span>
             <span style="float: right;color: rgb(29, 157, 255)" @click.stop="submit">确定</span>
           </p>
         <ul>
           <li v-for="(item,index) in countylist" @click.stop="countyClick(item.id,item.name)" :class="{'select_name' : nameid == item.id}">
              {{item.name}}
           </li>
         </ul>
       </div>
    </div>
  </div>
</template>
<script>
  import { LoadMore, TransferDom } from 'vux'
  import { Loadmore } from 'mint-ui'
  import Vue from 'vue'
  Vue.component(Loadmore.name, Loadmore)
  export default {
    components: {
      LoadMore
    },
    directives: {
      TransferDom
    },
    name: 'nearby',
    data () {
      return {
        cardsta: false,
        show: false,
        classify_list: [],
        last_id: 0,
        province: '',
        city: '',
        county: '',
        countylist: [],
        id: '',
        namesta: false,
        nameid: '',
        num: '',
        name: '',
        proid: '',
        cityid: '',
        countyid: '',
        list: [],
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        research: true,
        nocard: true,
        isshow: true
      }
    },
    methods: {
      handleTopChange (status) {
        this.topStatus = status
      },
      loadBottom () {
        this.loadingBottomShow = true
        if (this.research === true) {
          this.getAjax('')
        } else {
          this.loadingBottomShow = false
          this.$refs.loadmore.onBottomLoaded()
        }
      },
      loadTop () {
        this.nocard = true
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        this.getAjax('reflsh')
      },
      countyClick: function (id, name) {
        var thisObj = this
        thisObj.nameid = id
        thisObj.name = name
      },
      select: function (num) {
        this.num = num
        this.nocard = true
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        if (num === 0) {
          this.nameid = this.countylist[0].id
          this.name = this.countylist[0].name
          this.id = ''
          this.city = ''
          this.county = ''
        } else if (num === 1) {
          if (this.province === '') {
            this.$vux.toast.show({
              text: '请选择省',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          this.id = this.proid
        } else {
          if (this.city === '') {
            this.$vux.toast.show({
              text: '请选择市',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          this.id = this.cityid
        }
        this.countyAjax()
        this.namesta = true
      },
      submit: function () {
        if (this.num === 0) {
          this.province = this.name
          this.proid = this.nameid
        } else if (this.num === 1) {
          this.city = this.name
          this.cityid = this.nameid
        } else {
          this.county = this.name
          this.countyid = this.nameid
        }
        this.id = this.nameid
        this.nocard = true
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        this.getAjax('reflsh')
        this.namesta = false
      },
      getAjax: function (title) {
        var thisObj = this
        thisObj.$chaos.ajax({
          data: {
            last_id: thisObj.last_id,
            province: thisObj.province,
            city: thisObj.city,
            county: thisObj.county
          },
          slient: true,
          userinfo: true,
          url: 'User/getDealerList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              if (title === 'reflsh') {
                thisObj.list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.list.length === 0) {
                thisObj.research = false
                if (thisObj.last_id === 0) {
                  thisObj.nocard = false
                }
                return false
              }
              if (res.result.list.length < 5) {
                thisObj.bottomsta = true
                thisObj.research = false
              } else {
                thisObj.last_id = res.result.list[res.result.list.length - 1].de_id
              }
              thisObj.list = thisObj.list.concat(res.result.list)
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      countyAjax: function () {
        var thisObj = this
        thisObj.$chaos.ajax({
          data: {
            id: thisObj.id
          },
          slient: true,
          userinfo: false,
          url: 'Index/getCityList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.countylist = res.result.list
              thisObj.nameid = res.result.list[0].id
              thisObj.name = res.result.list[0].name
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        var thisObj = this
        this.$chaos.setTitle('附近经销商')
        this.$store.commit('headerShow', false)
//        this.$store.commit('title', '附近经销商')
        this.$store.commit('footerShow', false)
        let setin = window.setInterval(function () {
          if (!thisObj.isshow) {
            window.clearInterval(setin)
            return false
          }
          document.getElementById('city').onscroll = function () {
            if (document.getElementById('city').scrollTop === '80') {
              return false
            }
            thisObj.isshow = false
            console.log(thisObj.isshow)
          }
        }, 1)
        this.countyAjax()
        thisObj.$chaos.verify(function () {
          thisObj.getAjax()
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  .achievement{
    width: 100%;
    overflow: hidden;
  }
  .name_bh{
    height:60px;
    width:100%;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  .topIndex{
    background: #fff;
    position: fixed;
    z-index:2;
    top:0px;
    left:0px;
    width:100%;
  }
  .select_name{
    color: rgb(29, 157, 255);
  }
  .nearby_n1 p{
    line-height: 40px;
    padding: 0px 15px;
    border-bottom: 1px solid #f1f1f1;
    overflow: hidden;
  }
  .loca_li2 span{
    width: 47px;
    overflow: hidden;
    display: inline-block;
    height:18px;
  }
  .nearby_n1 ul{
    overflow: auto;
    height:150px;
  }
  .nearby_n1 ul li{
    line-height: 35px;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
  }
  .nearby_n1{
    position: absolute;
    bottom: 0px;
    width:calc(100% - 2px);
    height: 200px;
    background: #fff;
    border:1px solid #f1f1f1;
  }
  .nearby_nm{
    width:100%;
    position: fixed;
    height:100%;
    left:0px;
    top:0px;
    z-index:111;
    background: rgba(0,0,0,0.4);
  }
  .bg_color{
    background: url("../assets/image/a_10.png");
    background-size: cover;
  }
  .near_by{
    width:calc(100% - 30px);
    padding: 15px 15px;
    overflow: hidden;
  }
  .near_by img{
    width:120px;
    height:120px;
    border-radius: 5px;
    float: left;
  }
  .near_b1 p{
    color: #676767;
  }
  .near_p{
    height:44px;
    line-height:22px;
    margin:11px 0px;

  }
  .near_b1 h3{
    font-size: 16px;
    line-height: 28px;
  }
  .near_b1{
    margin-left:130px;
  }
  .loca{
    width:calc(100% - 30px);
    background: #fff;
    padding: 10px 15px;
    overflow: hidden;
  }
  .all{
    background: #f1f1f1;
    line-height: 40px;
    padding: 0px 15px;
    width:calc(100% - 15px);
    color: #000;
  }
  .loca_li1{
    width:22%;
  }
  .loca li{
    float: left;
  }
  .loca_li2{
    width:25%;
    border-right:1px solid #cacaca;
    text-align: center;
  }
  .loca_li2 img{
    width: 12px;
    vertical-align: 2px;
  }
  .loca .loca_li2:last-child{
    border-right: 0px;
  }
</style>
